<template>
  <!-- 案件查询页面 -->
  <section class="page namelist-query">
    <data-form :model="model" :page="pageService" :rules="rules" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model="model.personalNo"></el-input>
        </el-form-item>
        <el-form-item label="产品号" prop="productNo">
          <el-input v-model="model.productNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model.trim="model.personalName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model="model.idCard" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="账户总金额" prop="caseMoney">
          <number-range :isInteger="true" v-model="model.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="逾期金额" prop="overdueAmount">
          <number-range :isInteger="true" v-model="model.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod" class="two-select">
          <number-range :isInteger="true" v-model="model.overduePeriod"></number-range>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range :isInteger="true" v-model="model.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="model.mobileNo" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="productNo">
          <el-input v-model="model.productNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="还款日" prop="payDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="model.payDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="model.payDate"></number-range>
          <!-- <el-input type="number" v-model="model.payDate"></el-input> -->
        </el-form-item>
        
        <el-form-item label="推送时间" prop="pushTime">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="model.pushTime"></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="默认锁定时间" prop="lockTime">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="model.lockTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="指定锁定时间" prop="leaveDueDate">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="model.leaveDueDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <el-input v-model.trim="model.queueCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="入催原因码" prop="reasonCode">
          <el-select clearable placeholder="请选择" v-model="model.reasonCode">
            <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData('ReasonCode')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道号" prop="channelCode">
          <el-select clearable placeholder="请选择" v-model="model.channelCode">
            <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData(
                'QueueCategory'
              )"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="进入队列时间" prop="queueDate">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="model.queueDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="进入渠道时间" prop="inChannelDate">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="model.inChannelDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="AT" prop="at">
          <el-input v-model.trim="model.at" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="CT" prop="ct">
          <el-input v-model.trim="model.ct" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="机构号" prop="companyCode">
          <el-input v-model.trim="model.companyCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="组别号" prop="deptNo">
          <el-input v-model.trim="model.deptNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="经办代码" prop="currentCollectorCode">
          <el-input v-model.trim="model.currentCollectorCode" :maxlength="20"></el-input>
        </el-form-item> -->
      </template>
    </data-form>

    <data-box :data="dataSet" :page="pageService" :selectionList.sync="selectionList" @onPageChange="refreshData">
      <template slot="buttons">
        <!-- <el-button @click="exportFollowup" v-auth="2010">导出催记</el-button> -->
        <el-button @click="exportFollowup" v-auth="2010">名单撤回</el-button>
        <el-button @click="exportFollowup" v-auth="2010">名单手动推送</el-button>
        <el-button @click="exportFollowup" v-auth="2010">名单重新推送</el-button>
        <el-button @click="exportFollowup" v-auth="2010">名单单笔删除</el-button>
        <el-button @click="exportFollowup" v-auth="2010">名单单笔添加</el-button>
        <el-button @click="exportFollowup" v-auth="2010">下载名单模板</el-button>
      </template>
      <!-- <template slot="caseTotalInfo">
        <case-total-info :caseInfoData="caseTotalData" />
      </template> -->
      <template slot="columns">
        <el-table-column prop="caseNumber" label="账户号" show-overflow-tooltip :min-width="$helper.getColumnWidth(8)">
          <template slot-scope="scope">
            <a @click="openExecutionPage(scope.row)">{{
              scope.row.caseNumber
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalNo" label="客户号" show-overflow-tooltip :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="personalName" show-overflow-tooltip label="客户姓名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="idCard" label="证件号" show-overflow-tooltip :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <!-- <el-table-column prop="mobileNo" label="手机号" show-overflow-tooltip :min-width="$helper.getColumnWidth(4)">
        </el-table-column> -->
        <el-table-column prop="caseMoney" show-overflow-tooltip label="账户总金额" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.toThousands(row.caseMoney)" sortable>
        </el-table-column>
        <el-table-column prop="overdueAmount" label="逾期金额" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.toThousands(row.overdueAmount)" sortable>
        </el-table-column>
        <el-table-column prop="overduePeriod" :formatter="row => row.overduePeriod" label="逾期期数" show-overflow-tooltip :min-width="$helper.getColumnWidth(4)" sortable>
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" show-overflow-tooltip :min-width="$helper.getColumnWidth(4)" sortable>
        </el-table-column>
        <!-- <el-table-column prop="payDate" label="还款日" show-overflow-tooltip :formatter="row => $filter.dateFormat(row.payDate)" :min-width="$helper.getColumnWidth(5)" sortable>
        </el-table-column>
        <el-table-column prop="billDate" label="账单日" show-overflow-tooltip :formatter="row => $filter.dateFormat(row.billDate)" :min-width="$helper.getColumnWidth(5)" sortable>
        </el-table-column> -->
        <el-table-column prop="payDate" label="还款日" show-overflow-tooltip :min-width="$helper.getColumnWidth(5)" sortable>
        </el-table-column>
        <!-- <el-table-column prop="billDate" label="账单日" show-overflow-tooltip :min-width="$helper.getColumnWidth(5)" sortable>
        </el-table-column> -->
        <!-- <el-table-column prop="productNo" show-overflow-tooltip label="产品编号" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="reasonCode" show-overflow-tooltip label="入催原因码" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dictConvert(row.reasonCode, 'ReasonCode')">
        </el-table-column>
        <el-table-column prop="channelCode" show-overflow-tooltip label="渠道号" :min-width="$helper.getColumnWidth(4)" :formatter="
            row => $filter.dictConvert(row.channelCode, 'QueueCategory')
          ">
        </el-table-column>
        <el-table-column prop="queueCode" show-overflow-tooltip label="队列代码" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="innerCaseState" show-overflow-tooltip label="案件状态" :min-width="$helper.getColumnWidth(3)" :formatter="
            row => $filter.dictConvert(row.innerCaseState, 'InnerCaseState')
          ">
        </el-table-column>
        <el-table-column prop="companyCode" label="机构号" show-overflow-tooltip :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="deptNo" label="组别号" show-overflow-tooltip :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="currentCollectorCode" label="经办代码" show-overflow-tooltip :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="lockTime" label="默认锁定时间" show-overflow-tooltip :formatter="row => $filter.dateFormat(row.lockTime)" :min-width="$helper.getColumnWidth(5)" sortable>
        </el-table-column>
        <el-table-column prop="leaveDueDate" label="指定锁定时间" show-overflow-tooltip :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dateFormat(row.leaveDueDate)" sortable>
        </el-table-column>
        <el-table-column prop="queueDate" label="进入队列时间" show-overflow-tooltip :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dateFormat(row.queueDate)" sortable>
        </el-table-column>
        <el-table-column prop="inChannelDate" label="进入渠道时间" show-overflow-tooltip :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dateFormat(row.inChannelDate)" sortable>
        </el-table-column> -->
        <el-table-column prop="closingCode" label="最近结案码" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="!scope.row.objectiveCode"></div>
            <div v-else>
              {{
                `${$filter.dictConvert(
                  scope.row.queueCategory,
                  "QueueCategory"
                )}${scope.row.objectiveCode || ""}${scope.row.modifierCode ||
                  ""}`
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="followupTime" label="最近跟进时间" show-overflow-tooltip :formatter="row => $filter.dateTimeFormat(row.followupTime)" :min-width="$helper.getColumnWidth(5)" sortable>
        </el-table-column>
        <el-table-column :min-width="$helper.getOperateWidth(2)" show-overflow-tooltip label="操作">
          <template slot-scope="scope">
            <el-button @click="onClick(scope.row)" type="text" v-auth="237">批注</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!-- 批注 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.addCaseRemark" append-to-body title="添加批注">
      <add-case-remark @close="
          dialog.addCaseRemark = false;
          refreshData();
        " ref="add-case-remark"></add-case-remark>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import { namespace, Mutation } from "vuex-class";
import AddCaseRemark from "~/components/collection-execution/operate-components/add-case-remark.vue";
import { SynthesizeQueryService } from "~/services/domain-service/synthesize-query.service";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";
import SelectDepartment from "~/components/business-component/select-department.vue";
import { MENU_CHANNEL } from "../../config/enum.config";
const CollectionExecutionModule = namespace("collection-execution");
import CaseTotalInfo from "~/components/common/case-total-info.vue";

@Auth(2008)
@Layout("workspace")
@Component({
  components: {
    GetLabelName,
    NumberRange,
    AddCaseRemark,
    SelectDepartment,
    CaseTotalInfo
  }
})
export default class NamelistQuery extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(SynthesizeQueryService)
  private synthesizeQuerService: SynthesizeQueryService;
  @CollectionExecutionModule.Mutation private updateCaseId;
  @CollectionExecutionModule.Mutation private updatePersonalType;
  private dataSet: any[] = [];
  private selectionList: any[] = [];
  private dialog: any = {
    addCaseRemark: false
  };

  // 表单验证规则
  private rules = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };

  private caseTotalData: any = {};

  private model: any = {
    queueCode: "",
    personalNo: "",
    caseNumber: "",
    personalName: "",
    caseMoney: {
      min: "",
      max: ""
    },
    idCard: "",
    overdueAmount: {
      min: "",
      max: ""
    },
    overdueDays: {
      min: "",
      max: ""
    },
    overduePeriod: {
      min: "",
      max: ""
    },
    deptNo: "",
    overduePeriodMax: "",
    overduePeriodMin: "",
    mobileNo: "",
    productNo: "",
    billDate: { max: "", min: "" },
    payDate: { max: "", min: "" },
    leaveDueDate: [],
    lockTim: [],
    reasonCode: "",
    queueDate: [],
    at: "",
    ct: "",
    companyCode: "",
    currentCollectorCode: "",
    innerCaseState: "",
    inChannelDate: []
  };

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    if (
      this.model.caseNumber &&
      this.$validator.regex.isChineseComma.test(this.model.caseNumber)
    )
      return this.$message.error("请用英文逗号！");
    if (
      (this.model.overduePeriod.min &&
        !this.$validator.regex.isNumber.test(this.model.overduePeriod.min)) ||
      (this.model.overduePeriod.max &&
        !this.$validator.regex.isNumber.test(this.model.overduePeriod.max))
    )
      return this.$message.error("请输入整数！");

    this.getCaseAmount();
    this.synthesizeQuerService
      .caseSearch(this.paramsHandler(), this.pageService)
      .subscribe(data => {
        this.dataSet = data;
        this.selectionList = [];
      });
  }

  private paramsHandler() {
    const params = { ...this.model };
    params.leaveDueDateMax = this.$filter.dateRanageFormat(
      this.model.leaveDueDate
    ).end;
    params.leaveDueDateMin = this.$filter.dateRanageFormat(
      this.model.leaveDueDate
    ).start;
    // params.payDateMax = this.$filter.dateRanageFormat(this.model.payDate).end;
    // params.payDateMin = this.$filter.dateRanageFormat(this.model.payDate).start;
    // params.billDateMax = this.$filter.dateRanageFormat(this.model.billDate).end;
    // params.billDateMin = this.$filter.dateRanageFormat(this.model.billDate).start;
    params.payDateMax = this.model.payDate.max;
    params.payDateMin = this.model.payDate.min;
    params.billDateMax = this.model.billDate.max;
    params.billDateMin = this.model.billDate.min;
    params.caseMoneyMax = this.model.caseMoney.max;
    params.caseMoneyMin = this.model.caseMoney.min;
    params.overdueAmountMax = this.model.overdueAmount.max;
    params.overdueAmountMin = this.model.overdueAmount.min;
    params.overduePeriodMax = this.model.overduePeriod.max;
    params.overduePeriodMin = this.model.overduePeriod.min;
    params.lockTimeMax = this.$filter.dateRanageFormat(this.model.lockTime).end;
    params.lockTimeMin = this.$filter.dateRanageFormat(
      this.model.lockTime
    ).start;
    params.queueDateMax = this.$filter.dateRanageFormat(
      this.model.queueDate
    ).end;
    params.queueDateMin = this.$filter.dateRanageFormat(
      this.model.queueDate
    ).start;
    params.inChannelDateMax = this.$filter.dateRanageFormat(
      this.model.inChannelDate
    ).end;
    params.inChannelDateMin = this.$filter.dateRanageFormat(
      this.model.inChannelDate
    ).start;
    params.overdueDaysMin = this.model.overdueDays.min;
    params.overdueDaysMax = this.model.overdueDays.max;

    delete params.leaveDueDate;
    delete params.payDate;
    delete params.caseMoney;
    delete params.overdueAmount;
    delete params.lockTime;
    delete params.billDate;
    delete params.queueDate;
    delete params.overdueDays;
    delete params.overduePeriod;
    delete params.inChannelDate;

    return params;
  }

  private onClick(row) {
    this.updateCaseId(row.id);
    this.dialog.addCaseRemark = true;
  }
  /**
   * 表单范围输入框重置
   */
  private handleResetForm() {
    this.model.overdueAmount = { min: "", max: "" };
    this.model.caseMoney = { min: "", max: "" };
    this.model.overdueDays = { min: "", max: "" };
    this.model.overduePeriod = { min: "", max: "" };
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.updatePersonalType(row.personalType);
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Query_case_query,
      hiddenAction: true
    });
  }

  /**
   * 导出催记
   */
  private exportFollowup() {
    const ids = this.selectionList.map(v => v.id);
    const request: any = {
      ...this.paramsHandler(),
      caseIds: ids
    };
    this.synthesizeQuerService
      .caseSearchExportFollow(request)
      .subscribe(data =>
        // this.$common.downloadFile(data)
        this.$message.success("催记正在导出，请关注任务中心！")
      );
  }

  private getCaseAmount() {
    this.synthesizeQuerService
      .caseSearchAmount(this.paramsHandler())
      .subscribe(data => {
        this.caseTotalData = data;
      });
  }
}
</script>

<style lang="less" scoped></style>
